<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Temu跨境电商平台系统设计 - 商家使用场景</title>
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap"
      rel="stylesheet"
    />
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: "Noto Sans SC", sans-serif;
        background-color: #f9f9f9;
      }

      .slide-container {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        animation: fadeIn 1s ease-out;
        background: linear-gradient(135deg, #ffffff 0%, #f6f6f6 100%);
      }

      .logo-container {
        position: absolute;
        top: 20px;
        right: 30px;
        z-index: 20;
      }

      .page-title {
        position: relative;
        font-size: 2.2rem;
        font-weight: 700;
        color: #003366;
        text-align: center;
        margin-bottom: 5px;
        animation: slideInDown 0.8s ease-out;
      }

      .title-decoration {
        position: relative;
        height: 3px;
        width: 140px;
        margin: 0 auto 20px;
        background: linear-gradient(90deg, transparent, #ff4e00, transparent);
        animation: pulseWidth 2s infinite;
      }

      .page-number {
        position: absolute;
        bottom: 15px;
        right: 30px;
        font-size: 0.9rem;
        color: #003366;
        opacity: 0.7;
      }

      /* 左右布局 */
      .main-layout {
        display: flex;
        width: 94%;
        height: calc(100% - 140px);
        margin: 0 auto;
        gap: 30px;
      }

      /* 左侧图片区域 */
      .image-section {
        flex: 1;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        position: relative;
        animation: fadeIn 0.8s ease-out, slideInLeft 0.8s ease-out;
      }

      .feature-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .image-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 20px;
        background: linear-gradient(
          0deg,
          rgba(0, 51, 102, 0.9) 0%,
          rgba(0, 51, 102, 0.8) 50%,
          rgba(0, 51, 102, 0) 100%
        );
        color: white;
      }

      .overlay-title {
        font-size: 1.6rem;
        font-weight: 700;
        margin-bottom: 10px;
      }

      .overlay-text {
        font-size: 1rem;
        line-height: 1.4;
        opacity: 0.9;
      }

      /* 右侧内容区域 */
      .content-section {
        flex: 1.2;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 15px;
        animation: fadeIn 0.8s ease-out, slideInRight 0.8s ease-out;
      }

      .scenario-section {
        background: white;
        border-radius: 10px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        overflow: hidden;
        transition: all 0.3s ease;
        padding: 15px;
        display: flex;
        flex-direction: column;
      }

      .scenario-section:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      }

      .scenario-section.product-management {
        grid-column: 1;
        grid-row: 1;
        animation: fadeIn 0.8s ease-out 0.1s backwards,
          slideInUp 0.8s ease-out 0.1s backwards;
      }

      .scenario-section.order-processing {
        grid-column: 2;
        grid-row: 1;
        animation: fadeIn 0.8s ease-out 0.2s backwards,
          slideInUp 0.8s ease-out 0.2s backwards;
      }

      .scenario-section.data-analysis {
        grid-column: 1;
        grid-row: 2;
        animation: fadeIn 0.8s ease-out 0.3s backwards,
          slideInUp 0.8s ease-out 0.3s backwards;
      }

      .scenario-section.marketing {
        grid-column: 2;
        grid-row: 2;
        animation: fadeIn 0.8s ease-out 0.4s backwards,
          slideInUp 0.8s ease-out 0.4s backwards;
      }

      .section-header {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        border-bottom: 1px solid rgba(0, 51, 102, 0.1);
        padding-bottom: 8px;
      }

      .header-icon {
        width: 36px;
        height: 36px;
        margin-right: 12px;
        background-color: rgba(255, 78, 0, 0.1);
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .header-title {
        font-size: 1.3rem;
        font-weight: 600;
        color: #003366;
      }

      /* 内容样式 */
      .section-content {
        flex: 1;
        display: flex;
        flex-direction: column;
      }

      .feature-list {
        padding-left: 15px;
        margin-top: 5px;
        flex: 1;
      }

      .feature-item {
        margin-bottom: 8px;
        position: relative;
        padding-left: 15px;
        line-height: 1.5;
        font-size: 1.1rem;
        font-weight: 500;
      }

      .feature-item::before {
        content: "";
        position: absolute;
        left: 0;
        top: 9px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #ff4e00;
      }

      /* 底部可视化区域 */
      .visual-element {
        height: 60px;
        margin-top: 5px;
        border-radius: 6px;
        overflow: hidden;
        position: relative;
      }

      /* 商品管理可视化 */
      .product-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        height: 100%;
        padding: 6px;
        background-color: #f8f9fa;
      }

      .product-item {
        background-color: white;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        padding: 4px;
        border: 1px solid rgba(0, 51, 102, 0.1);
        position: relative;
        overflow: hidden;
      }

      .product-color {
        position: absolute;
        top: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border-radius: 0 0 0 10px;
      }

      .product-color.green {
        background-color: #4caf50;
      }

      .product-color.orange {
        background-color: #ff9800;
      }

      .product-color.red {
        background-color: #f44336;
      }

      /* 订单处理可视化 */
      .order-flow {
        height: 100%;
        background-color: #f8f9fa;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 0 10px;
      }

      .order-step {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #003366;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 600;
        font-size: 0.8rem;
        position: relative;
        z-index: 5;
      }

      .order-line {
        position: absolute;
        top: 50%;
        left: 10%;
        width: 80%;
        height: 2px;
        background: linear-gradient(90deg, #ff4e00, #ff7e40);
        z-index: 1;
      }

      .order-package {
        position: absolute;
        top: calc(50% - 8px);
        left: 10%;
        width: 16px;
        height: 16px;
        background-color: #ff4e00;
        border-radius: 3px;
        z-index: 2;
        animation: movePackage 4s infinite linear;
      }

      @keyframes movePackage {
        0% {
          left: 10%;
        }
        100% {
          left: 90%;
        }
      }

      /* 数据分析可视化 */
      .chart-container {
        height: 100%;
        background-color: #f8f9fa;
        position: relative;
        padding: 8px;
      }

      .chart-bar {
        position: absolute;
        bottom: 8px;
        width: 14%;
        border-radius: 3px 3px 0 0;
        background: linear-gradient(180deg, #ff4e00, #ff7e40);
        animation: growBar 1.5s forwards;
      }

      .chart-bar:nth-child(1) {
        left: 8%;
        height: 0%;
        animation-delay: 0.1s;
      }

      .chart-bar:nth-child(2) {
        left: 26%;
        height: 0%;
        animation-delay: 0.2s;
      }

      .chart-bar:nth-child(3) {
        left: 44%;
        height: 0%;
        animation-delay: 0.3s;
      }

      .chart-bar:nth-child(4) {
        left: 62%;
        height: 0%;
        animation-delay: 0.4s;
      }

      .chart-bar:nth-child(5) {
        left: 80%;
        height: 0%;
        animation-delay: 0.5s;
      }

      /* 营销活动可视化 */
      .marketing-visual {
        height: 100%;
        background: linear-gradient(
          45deg,
          rgba(255, 78, 0, 0.1),
          rgba(255, 78, 0, 0.15)
        );
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
      }

      .marketing-circles {
        display: flex;
        gap: 5px;
      }

      .marketing-circle {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background-color: rgba(0, 51, 102, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 0.8rem;
        position: relative;
      }

      .marketing-glow {
        position: absolute;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 2px solid #ff4e00;
        opacity: 0;
        animation: glowPulse 2s infinite;
      }

      @keyframes glowPulse {
        0% {
          transform: scale(1);
          opacity: 0.7;
        }
        100% {
          transform: scale(1.5);
          opacity: 0;
        }
      }

      /* 动画 */
      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      @keyframes slideInDown {
        from {
          transform: translateY(-30px);
          opacity: 0;
        }
        to {
          transform: translateY(0);
          opacity: 1;
        }
      }

      @keyframes slideInUp {
        from {
          transform: translateY(30px);
          opacity: 0;
        }
        to {
          transform: translateY(0);
          opacity: 1;
        }
      }

      @keyframes slideInLeft {
        from {
          transform: translateX(-50px);
          opacity: 0;
        }
        to {
          transform: translateX(0);
          opacity: 1;
        }
      }

      @keyframes slideInRight {
        from {
          transform: translateX(50px);
          opacity: 0;
        }
        to {
          transform: translateX(0);
          opacity: 1;
        }
      }

      @keyframes pulseWidth {
        0%,
        100% {
          width: 100px;
        }
        50% {
          width: 140px;
        }
      }

      @keyframes growBar {
        to {
          height: var(--height);
        }
      }

      /* 图标样式 */
      .icon-svg {
        width: 22px;
        height: 22px;
      }
    </style>
  </head>
  <body>
    <div class="slide-container">
      <!-- Logo -->
      <div class="logo-container">
        <img
          src="images/temu_logo.svg"
          alt="Temu Logo"
          width="100"
          height="30"
        />
      </div>

      <!-- 标题 -->
      <div class="flex flex-col items-center mt-5 mb-4">
        <h1 class="page-title">商家使用场景</h1>
        <div class="title-decoration"></div>
      </div>

      <!-- 左右布局主区域 -->
      <div class="main-layout">
        <!-- 左侧图片区域 -->
        <div class="image-section">
          <img
            src=".\static\a.jpg"
            alt="商家管理平台界面"
            class="feature-image"
          />
          <div class="image-overlay">
            <h2 class="overlay-title">商家后台管理系统</h2>
            <p class="overlay-text">
              提供一站式跨境电商业务运营解决方案，帮助商家高效管理商品、订单、数据和营销活动
            </p>
          </div>
        </div>

        <!-- 右侧内容区域 -->
        <div class="content-section">
          <!-- 商品管理 -->
          <div class="scenario-section product-management">
            <div class="section-header">
              <div class="header-icon">
                <svg class="icon-svg" viewBox="0 0 24 24" fill="#ff4e00">
                  <path
                    d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"
                  />
                </svg>
              </div>
              <h2 class="header-title">商品管理</h2>
            </div>

            <div class="section-content">
              <ul class="feature-list">
                <li class="feature-item">录入商品信息</li>
                <li class="feature-item">设置价格与库存</li>
                <li class="feature-item">上下架管理</li>
              </ul>

              <div class="visual-element">
                <div class="product-grid">
                  <div class="product-item">
                    <div class="product-color green"></div>
                    <div
                      style="
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                      "
                    >
                      <div
                        style="
                          width: 70%;
                          height: 6px;
                          background-color: rgba(0, 0, 0, 0.1);
                          border-radius: 3px;
                        "
                      ></div>
                      <div
                        style="
                          width: 50%;
                          height: 6px;
                          background-color: rgba(0, 0, 0, 0.1);
                          border-radius: 3px;
                        "
                      ></div>
                      <div
                        style="
                          width: 40%;
                          height: 6px;
                          background-color: rgba(255, 78, 0, 0.3);
                          border-radius: 3px;
                        "
                      ></div>
                    </div>
                  </div>
                  <div class="product-item">
                    <div class="product-color orange"></div>
                    <div
                      style="
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                      "
                    >
                      <div
                        style="
                          width: 60%;
                          height: 6px;
                          background-color: rgba(0, 0, 0, 0.1);
                          border-radius: 3px;
                        "
                      ></div>
                      <div
                        style="
                          width: 40%;
                          height: 6px;
                          background-color: rgba(0, 0, 0, 0.1);
                          border-radius: 3px;
                        "
                      ></div>
                      <div
                        style="
                          width: 35%;
                          height: 6px;
                          background-color: rgba(255, 78, 0, 0.3);
                          border-radius: 3px;
                        "
                      ></div>
                    </div>
                  </div>
                  <div class="product-item">
                    <div class="product-color red"></div>
                    <div
                      style="
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                      "
                    >
                      <div
                        style="
                          width: 65%;
                          height: 6px;
                          background-color: rgba(0, 0, 0, 0.1);
                          border-radius: 3px;
                        "
                      ></div>
                      <div
                        style="
                          width: 45%;
                          height: 6px;
                          background-color: rgba(0, 0, 0, 0.1);
                          border-radius: 3px;
                        "
                      ></div>
                      <div
                        style="
                          width: 30%;
                          height: 6px;
                          background-color: rgba(255, 78, 0, 0.3);
                          border-radius: 3px;
                        "
                      ></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 订单处理 -->
          <div class="scenario-section order-processing">
            <div class="section-header">
              <div class="header-icon">
                <svg class="icon-svg" viewBox="0 0 24 24" fill="#ff4e00">
                  <path
                    d="M18 17H6v-2h12v2zm0-4H6v-2h12v2zm0-4H6V7h12v2zM3 22l1.5-1.5L6 22l1.5-1.5L9 22l1.5-1.5L12 22l1.5-1.5L15 22l1.5-1.5L18 22l1.5-1.5L21 22V2l-1.5 1.5L18 2l-1.5 1.5L15 2l-1.5 1.5L12 2l-1.5 1.5L9 2 7.5 3.5 6 2 4.5 3.5 3 2v20z"
                  />
                </svg>
              </div>
              <h2 class="header-title">订单处理</h2>
            </div>

            <div class="section-content">
              <ul class="feature-list">
                <li class="feature-item">接收订单</li>
                <li class="feature-item">发货</li>
                <li class="feature-item">退货换货管理</li>
              </ul>

              <div class="visual-element">
                <div class="order-flow">
                  <div class="order-line"></div>
                  <div class="order-package"></div>
                  <div class="order-step">1</div>
                  <div class="order-step">2</div>
                  <div class="order-step">3</div>
                  <div class="order-step">4</div>
                </div>
              </div>
            </div>
          </div>

          <!-- 数据分析 -->
          <div class="scenario-section data-analysis">
            <div class="section-header">
              <div class="header-icon">
                <svg class="icon-svg" viewBox="0 0 24 24" fill="#ff4e00">
                  <path
                    d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"
                  />
                </svg>
              </div>
              <h2 class="header-title">数据分析</h2>
            </div>

            <div class="section-content">
              <ul class="feature-list">
                <li class="feature-item">查看销售数据</li>
                <li class="feature-item">客户行为分析</li>
                <li class="feature-item">库存周转情况</li>
              </ul>

              <div class="visual-element">
                <div class="chart-container">
                  <div class="chart-bar" style="--height: 60%"></div>
                  <div class="chart-bar" style="--height: 85%"></div>
                  <div class="chart-bar" style="--height: 45%"></div>
                  <div class="chart-bar" style="--height: 70%"></div>
                  <div class="chart-bar" style="--height: 90%"></div>
                </div>
              </div>
            </div>
          </div>

          <!-- 营销活动 -->
          <div class="scenario-section marketing">
            <div class="section-header">
              <div class="header-icon">
                <svg class="icon-svg" viewBox="0 0 24 24" fill="#ff4e00">
                  <path
                    d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"
                  />
                </svg>
              </div>
              <h2 class="header-title">营销活动</h2>
            </div>

            <div class="section-content">
              <ul class="feature-list">
                <li class="feature-item">参与团购</li>
                <li class="feature-item">拼团机制</li>
                <li class="feature-item">进行内容营销推广</li>
              </ul>

              <div class="visual-element">
                <div class="marketing-visual">
                  <div class="marketing-circles">
                    <div class="marketing-circle">
                      团
                      <div class="marketing-glow"></div>
                    </div>
                    <div class="marketing-circle">购</div>
                    <div class="marketing-circle">优</div>
                    <div class="marketing-circle">惠</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 页码 -->
      <div class="page-number">6 / 20</div>
    </div>
  </body>
</html>
